<template>
  <div class="container-header large" slot="header">
    <Form class="search">
      <Row>
        <Col span="6">
          <FormItem label="年月选择">
            <DatePicker v-model="list.form.time" type="month" placeholder="年月选择"></DatePicker>
          </FormItem>
           <FormItem label="所在区域" placeholder="选择区域">
            <AreaSelect @input="selectProvince" :isChangeOnSelect="true" v-model="list.form.addressArr"></AreaSelect>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="门店类型">
            <SelectList v-model="list.form.storeTypeId" listType="storeTypeList" />
          </FormItem>
          <FormItem label="经销商">
            <DistributorSelect ref="distributor-select" v-model="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"></DistributorSelect>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="审核状态">
            <SelectList listType="quarterCheckStatus" :clearable="false" v-model="list.form.status"/>
          </FormItem>
          <FormItem label="门店">
            <StoreSelect v-model="list.form.storeId" :src="src" 
              :distributorId="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"
            ></StoreSelect>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem label="任务完成">
            <SelectList placeholder="是否完成任务" listType="enableTypeList" v-model="list.form.isTask"/>
          </FormItem>
        </Col>
        <Col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import AreaSelect from '@/components/AreaSelect'
  import SelectList from '@/components/SelectList'
  import DistributorSelect from '~/DistributorSelect'
  import StoreSelect from '~/StoreSelect'
  export default {
    props: {
      list: {
        type: Object,
        default() {
          return {
          }
        }
      }
    },
    components: {
      AreaSelect,
      SelectList,
      DistributorSelect,
      StoreSelect
    },
    data() {
      return {
        src: '/common/store/listStores'
      }
    },
    methods: {
      selectProvince(item) {
        if (item.length) {
          this.list.form.provinceId = item[0]
          this.list.form.cityId = item.length > 1 ? item[1] : null
          this.list.form.areaId = item.length > 2 ? item[2] : null
        } else {
          this.list.form.provinceId = null
          this.list.form.cityId = null
          this.list.form.areaId = null
          this.list.form.distributorId = null // 所在区域删除之后，经销商也要清楚
          this.$refs['distributor-select'].remote()
        }
      },
      onSearchBtnClick() {
        let arr = this.list.form.addressArr
        if (arr.length) {
          this.list.form.provinceId = arr[0]
          this.list.form.cityId = arr.length > 1 ? arr[1] : null
          this.list.form.areaId = arr.length > 2 ? arr[2] : null
        } else {
          this.list.form.provinceId = null
          this.list.form.cityId = null
          this.list.form.areaId = null
        }
        this.$emit('onSearchBtnClick', this.list.form)
      }
    }
  }
</script>
